<template>
  <div class="person">
    <img
      src="https://gitee.com/kong-lingzhen/tour-image/raw/master/fruit.jpg"
    />
    <ul>
      <li>是否勾选</li>
      <li>序号</li>
      <li>名称</li>
      <li>图片</li>
      <li>单价</li>
      <li>数量</li>
      <li>价格</li>
    </ul>
    <div v-for="item in fruitList" :key="item.id">
      <input type="checkbox" v-model="item.isChecked" />
      <span>{{ item.id }}</span>
      <div>
        <img :src="item.icon" />
      </div>
      <span>{{ item.price }}</span>
      <span>
        <button @click="addOne(item)">+</button>
        {{ item.num }}
        <button @click="reduceOne(item)">-</button>
      </span>
      <span>{{ totalPrice(item) }}</span>
    </div>
  </div>
</template>

<script setup name="Person">
import { ref } from "vue";

let fruitList = ref([
  {
    id: 1,
    name: "火龙果",
    icon: "https://gitee.com/kong-lingzhen/tour-image/raw/master/火龙果.png",
    price: 6,
    num: 2,
    isChecked: true,
  },
  {
    id: 2,
    name: "荔枝",
    icon: "https://gitee.com/kong-lingzhen/tour-image/raw/master/荔枝.png",
    price: 1,
    num: 16,
    isChecked: false,
  },
  {
    id: 3,
    name: "榴莲",
    icon: "https://gitee.com/kong-lingzhen/tour-image/raw/master/榴莲.png",
    price: 20,
    num: 1,
    isChecked: true,
  },
]);

function addOne(item) {
  item.num += 1;
}

function reduceOne(item) {
  item.num -= 1;
}

function totalPrice(item) {
  return item.num * item.price;
}
</script>

<style scoped>
</style>